import React from 'react';
import { Table,Breadcrumb,Button,Input,Upload,Select,message,Modal,Result} from 'antd';
import { HomeOutlined, FolderOpenOutlined,ExclamationCircleOutlined} from '@ant-design/icons';
import {Link} from 'react-router-dom'
import {connect} from 'react-redux'
import { LoadFileActionAsync,DeleteFileActionAsync} from '../../../redux/action/fileAction';
import http from '../../../service/http';
import { GetUserName } from '../../../common/auth';
import config from '../../../config'

const {Option}=Select
const ButtonStyle={margin:"15px"}

function File(props) {
  const [selectedRowKeys,setSelectedRowKeys]=React.useState([])
  const [search,setSearch]=React.useState('')
  const [searchType,setSearchType]=React.useState('name')
  const [page,setPage]=React.useState(1)
  const [per,setPer]=React.useState(-1)
  const onSelectChange = selectedRowKeys => {
    setSelectedRowKeys(selectedRowKeys);
  };
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  }
  React.useEffect(()=>{
    props.LoadFileActionAsync()
    http.getUser({username:GetUserName()}).then((res)=>{
      if(res.code!==200)return
      setPer(res.data.per)
    })
  // eslint-disable-next-line react-hooks/exhaustive-deps
  },[])
  const columns = [
    {
      title: '文件名',
      dataIndex: 'name',
      ellipsis:true,
      align:'center',
      sorter: (a, b) => a.id - b.id,
    },
    {
      title: '文件类型',
      dataIndex: 'type',
      ellipsis:true,
      align:'center',
    },
    {
      title: '文件大小(KB)',
      dataIndex: 'size',
      ellipsis:true,
      align:'center',
    },
    {
      title: '下载地址',
      dataIndex: 'url',
      ellipsis:true,
      align:'center',
    },
    {
      title:'下载',
      dataIndex:'edit',
      ellipsis:true,
      align:'center',
      render:(edit,row)=>{
        return(<div>
          <Button type='primary' onClick={()=>{
            Modal.confirm({
              title: '提示',
              icon: <ExclamationCircleOutlined />,
              content: '你确定要下载吗?',
              okText: '确认',
              cancelText: '取消',
              onOk() {
                const url=row.url
                window.location.href=url
              }
            });
          }}>下载</Button>
        </div>)
      }
    }
  ];
  return (
    per===-1?<div>
    </div>:per===1?
    <div>
      <Result
        status="403"
        title="403"
        subTitle="Sorry,你没有访问此页面的权限."
      />
    </div>
    :
    <div style={{padding:'15px'}}>
      <Breadcrumb>
        <Breadcrumb.Item>
          <HomeOutlined />
          <Link to='/home'>首页</Link>
        </Breadcrumb.Item>
        <Breadcrumb.Item>
          <FolderOpenOutlined />
          <Link to='/home/file4'>文件信息</Link>
        </Breadcrumb.Item>
      </Breadcrumb>
      <hr/>
      <Upload
        name='file'
        // action='/api/file/upload'
        action={config.reqBaseUrl+'/file/upload'}
        onChange={(info)=>{
          if(info.file.response&&info.file.response.msg==="成功"){
            message.success('上传成功')
            props.LoadFileActionAsync()
          }
        }}
        showUploadList={false}
      >
        <Button type='primary' style={ButtonStyle}>上传</Button>
      </Upload>,
      <Button type="danger" style={ButtonStyle}
        onClick={()=>{
          if(selectedRowKeys.length===0){
            message.info('请至少选择一条数据！')
          }else{
            Modal.confirm({
              title: '提示',
              icon: <ExclamationCircleOutlined />,
              content: '你确定要删除吗?',
              okText: '确认',
              okType: 'danger',
              cancelText: '取消',
              onOk() {
                props.DeleteFileActionAsync({id:selectedRowKeys}).then((res)=>{
                  if(search===''){
                    props.LoadFileActionAsync({pageNum:page})
                  }else{
                    props.LoadFileActionAsync({[searchType]:search})
                  }
                })
              }
            });
          }
        }}
      >删除</Button>
      <Select defaultValue="name" style={{ width: '100px' ,marginLeft:'15px',borderRight:'none'}} onChange={(value)=>{setSearchType(value)}}>
        <Option value="name">文件名</Option>
        <Option value="type">文件类型</Option>
      </Select>
      <Input.Search
        placeholder="请输入"
        enterButton
        size="middle"
        onSearch={(value)=>{
          setSearch(value)
          props.LoadFileActionAsync({[searchType]:value})
        }}
        style={{marginTop:'15px',width:'300px'}}
      />
      <Button style={ButtonStyle} type="primary"
        onClick={()=>{
          props.LoadFileActionAsync()
        }}
      >重置</Button>
      <Table rowSelection={rowSelection} columns={columns} 
        dataSource={props.fileList.records}
        rowKey="id"
        pagination={
          {
            pageSize:4,
            total:props.fileList.total,
            onChange:(pageNum,pageSize)=>{
              setPage(pageNum)
              props.LoadStudentActionAsync({pageNum:pageNum,pageSize:pageSize})
            }
          }
        }
        locale={
          {
            cancelSort:'点击取消排序',
            triggerAsc:'点击升序',
            triggerDesc:'点击降序'
          }
        }
      />
    </div>
  )
}
//使用connect()()创建并暴露一个Count的容器组件
export default connect(
	state => ({
    fileList:state.fileList
	}),
	{LoadFileActionAsync,DeleteFileActionAsync}
)(File)
